import React, {FC} from 'react';
import {View, Text} from '@ant-design/react-native';
import {StyleSheet} from 'react-native';
const ChatBox: FC<{realname: string; content: string}> = ({
  realname,
  content,
}) => {
  return (
    <View>
      <Text style={styles.realname}>{realname}</Text>
      <View style={styles.right}>
        <View style={styles.box}>
          <Text style={styles.boxContent}>{content}</Text>
        </View>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  box: {
    backgroundColor: '#aaf3cd',
    maxWidth: '40%',
    color: '#333',
    padding: 10,
    borderRadius: 8,
  },
  right: {
    // display: 'flex',
    flexDirection: 'row',
    // justifyContent: 'flex-start',
  },
  realname: {
    textAlign: 'left',
    color: '#888',
    marginBottom: 2,
    marginLeft: 2,
  },
  boxContent: {
    color: '#333',
  },
});
export default ChatBox;
